{{#if loading}}
  <section class="row mt-10">
    <div class="text-center">
      <i class="icon icon-spinner icon-spin" style="font-size:36px;"></i>
    </div>
  </section>
{{else}}
  <div class='row mt-10'>
    <div class="col span-6">
      <label class='acc-label pb-5'>{{t 'newPipelineStep.stepType.applyApp.catalog.label'}}{{field-required}}</label>
      {{searchable-select
        class="form-control"
        content=catalogs
        allowCustom=true
        value=selectedCatalog
        optionValuePath="id"
        optionLabelPath="name"
      }}
    </div>
    <div class="col span-6">
      <label class='acc-label pb-5'>{{t 'newPipelineStep.stepType.applyApp.catalogTemplate.label'}}{{field-required}}</label>
      {{searchable-select
        class="form-control"
        content=apps
        allowCustom=true
        value=config.applyAppConfig.catalogTemplate
        optionValuePath="id"
        optionLabelPath="name"
      }}
      <p class="text-info text-small m-0">{{t 'newPipelineStep.stepType.applyApp.catalogTemplate.helpText'}}</p>
    </div>
  </div>
  <div class='row'>
    <div class="col span-6">
      <label class='acc-label pb-5'>{{t 'newPipelineStep.stepType.applyApp.version.label'}}{{field-required}}</label>
      {{searchable-select
        class="form-control"
        content=versions
        allowCustom=true
        value=config.applyAppConfig.version
        optionValuePath="id"
        optionLabelPath="name"
      }}
      <p class="text-info text-small m-0">{{t 'newPipelineStep.stepType.applyApp.version.helpText'}}</p>
    </div>
    <div class="col span-6">
        {{form-namespace
          namespace=namespace
          editing=true
        }}
        <p class="text-info text-small m-0">{{t 'newPipelineStep.stepType.applyApp.targetNamespace.helpText'}}</p>
    </div>
  </div>
  <div class='row'>
    <div class="col span-6">
      <label class='acc-label pb-5'>{{t 'newPipelineStep.stepType.applyApp.name.label'}}{{field-required}}</label>
      {{input class="form-control" value=config.applyAppConfig.name placeholder=(t 'newPipelineStep.stepType.applyApp.name.placeholder')}}
    </div>
  </div>
  <div>
    {{form-key-value
      initialMap=config.applyAppConfig.answers
      changed=(action (mut config.applyAppConfig.answers))
      header=(t 'newCatalog.answers.label')
      addActionLabel="newCatalog.answers.addAction"
    }}
  </div>
  {{#advanced-section}}
    {{pipeline-condition type="step" config=config.when}}
  {{/advanced-section}}
  {{top-errors errors=errors}}
  {{save-cancel saveDisabled=state.saveDisabled editing=editing createLabel="generic.add" save="save" cancel="cancel"}}
{{/if}}
